---
title: Get Started with Material Tailwind - Tailwind CSS Components Library
description: Learn how to use Material Tailwind components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.
navigation:
  [
    "quick-start",
    "installation",
    "npm",
    "yarn",
    "tailwindcss-config",
    "ripple-effect",
    "icons",
    "CDN",
    "example",
  ]
github: installation
next: license
---

# Get Started with Material Tailwind

<span id="quick-start" className="scroll-mt-48" />
Material Tailwind is free and open-source components library for Tailwind CSS inspired
by Material Design.

<br />
<br />

## Installation

<span id="installation" className="scroll-mt-48" />

Learn how to use @material-tailwind/html components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

`@material-tailwind/html` is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - <a href="https://tailwindcss.com/docs/installation?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">Tailwind CSS Installation.</a>

<br />
<br />

## Using NPM

Install @material-tailwind/html as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />

```bash
npm i @material-tailwind/html
```

---

## Using Yarn

Install @material-tailwind/html as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/html
```

---

## Using PNPM

Install @material-tailwind/html as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/html
```

---

## TailwindCSS Configurations

<span id="tailwindcss-config" className="scroll-mt-48" />

Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the <Code>withMT()</Code> function coming from @material-tailwind/html/utils.

```js {1, 3, 9}
const withMT = require("@material-tailwind/html/utils/withMT");

module.exports = withMT({
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

## Ripple Effect

<span id="ripple-effect" className="scroll-mt-48" />

@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the <Code>data-ripple-light="true"</Code> for light ripple effect and <Code>data-ripple-dark="true"</Code> for dark ripple effect as an attribute for components

The ripple effect used in @material-tailwind/html is a separate package called <a href="https://www.npmjs.com/package/material-ripple-effects?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">material-ripple-effect</a>

```html
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>

<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
```

---

## Icons

<span id="icons" className="scroll-mt-48" />

Add a link for the material icons fonts inside the head of your project, so to use the material icons with material tailwind components. You can also use font awesome font family for the project just add a link for it inside the head of your project.

```html
<!-- Material Icons Link -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- Font Awesome Link -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
  integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
  crossorigin="anonymous"
/>
```

---

## CDN

<span id="CDN" className="scroll-mt-48" />

You can use @material-tailwind/html as a CDN link as well, you just need to add the stylesheet and the script file for the component you want to use.

```html
<!-- stylesheet -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
/>

<!-- script -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/script-name.js"></script>
```

---

## Example

Now you're good to go and use @material-tailwind/html in your project.

<CodePreview
  id="example"
  component={
    <button
      className="middle none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button"
      data-ripple-light="true"
    >
      Button
    </button>
  }
>
```html
  <button
    className="middle none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    data-ripple-light="true"
  >
    Button
  </button>
```
</CodePreview>

---

<DocsTitle href="frameworks-integration">
## Frameworks Integration
</DocsTitle>

Framework-specific guides that cover our recommended approach to installing @material-tailwind/html in a number of popular environments. Select your preferred framework from the list below and follow the instructions.

<div
  className="mt-8 grid grid-cols-2 gap-6 md:grid-cols-4"
  id="frameworks-integration"
>
  <Tooltip content="React" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/react-vite" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.ReactLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Next.js" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/next" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.NextLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Vue.js" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/vue-vite" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.VueLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Nuxt.js" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/nuxt" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.NuxtLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Svelte" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/svelte" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.SvelteLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Laravel" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/laravel" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.LaravelLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Angular" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/angular" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.AngularLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Remix" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/remix" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.RemixLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Meteor.js" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/meteor" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.MeteorLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Gatsby" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/gatsby" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.GatsbyLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Solid.js" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/solid" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.SolidLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Qwik" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/qwik" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.QwikLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Symfony" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/symfony" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.SymfonyLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Phoenix" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/phoenix" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.PhoenixLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Django" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/django" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.DjangoLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
  <Tooltip content="Flask" placement="bottom" offset={-13}>
    <FrameworkCard route="/docs/html/guide/flask" center>
      <span className="my-6 grid h-24 w-24 place-items-center">
        <FrameworkIcons.FlaskLogo />
      </span>
    </FrameworkCard>
  </Tooltip>
</div>